<template>
  <!--理赔详情页-->
  <div>
    <wv-group class="mymsg">
      <wv-cell title="理赔编号" :value="delayrisk.delayriskNo"></wv-cell>
      <wv-cell title="申请时间" :value="delayrisk.applyDate"></wv-cell>
      <wv-cell title="商品名称" :value="delayrisk.goodsName"></wv-cell>
      <wv-cell title="状态" value="待受理" v-if="delayrisk.isCheck==1"></wv-cell>
      <wv-cell title="状态" value="已受理" v-if="delayrisk.isCheck==2"></wv-cell>
      <wv-cell title="数量" :value="'×'+delayrisk.applyNum"></wv-cell>
    </wv-group>
    <p class="tip">理赔进度等相关信息查询请拨打24小时客服热线4000713000</p>
    <ul class="list">
      <li v-for="(item,index) in insurantList">
        <p class="title">延误人{{index + 1}}</p>
        <ul>
          <li>
            <p>被保险人姓名</p>
            <p>{{item.userName}}</p>
          </li>
          <li>
            <p v-if="item.identityType==1">身份证号</p>
            <p v-if="item.identityType!=1">证件号</p>
            <p>{{item.identityNo}}</p>
          </li>
          <li>
            <p>银行卡号</p>
            <p><span>{{item.bankNo}}</span></p>
          </li>
          <li>
            <p>开卡银行</p>
            <p>{{item.depositBank}}</p>
          </li>
          <li>
            <div>
              <img :src="item.boardingPassImg  | imgPathFilter"  width="100%">
              <span>登机牌</span>
            </div>
            <div>
              <img :src="item.proveImg | imgPathFilter"  width="100%">
              <span>延误证明</span>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import {delayriskInsurantDetail} from '../../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: '',
    props: {},
    data() {
      return {
        delayrisk: {},
        insurantList: []
      };
    },
    methods: {
      delayriskInsurantDetailData(params){
        delayriskInsurantDetail(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            this.delayrisk = res.object.delayrisk;
            let insurantList = res.object.insurantList;
            for (let key in insurantList) {
              let insurant = insurantList[key];
              insurant['bankNo'] = this.$myUtils.replaceStr(insurant.bankNo);
            }
            this.insurantList = insurantList;
          }
        })
      }
    },
    created() {
      let delayriskId = this.$route.query.delayriskId;
      console.log(delayriskId);
      this.delayriskInsurantDetailData({delayriskId:delayriskId});
    },
    components: {}
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .tip {
    font-size: 15px;
    color: #111;
    font-weight: 700;
    margin: 10px;
  }

  .list {
    .title {
      font-size: 20px;
      color: #2e94f0;
    }
    > li {
      margin: 10px;
      border-bottom: 1px solid #ddd;
      li {
        text-align: left;
        margin-bottom: 10px;
        div {
          position: relative;
          margin-bottom: 10px;
          span {
            position: absolute;
            background-color: rgba(46, 148, 240, 0.7);
            font-size: 15px;
            line-height: 40px;
            color: #fff;
            height: 40px;
            bottom: 0;
            width: calc(100% - 10px);
            padding-left: 10px;
          }
        }
        p:first-child {
          color: #2d93f0;
          font-size: 13px;
        }
        p:last-child {
          font-size: 15px;
          color: #111;
          span {
            margin-right: 10px;
          }
          :last-child {
            margin-right: 0;
          }
        }

      }
      :last-child {
        margin-bottom: 5px;
      }

    }
  }
</style>
